<template>
  <div class="margin-container-list">
    <!--顶部搜索 -->
    <div class="mar-b-20">
      <div class="inline-flex">
        <el-select class="width-120" v-model="textCol">
          <el-option label="商品名称" value="goodsTitle"></el-option>
          <el-option label="商品货号" value="goodsCode"></el-option>
          <el-option label="商品条码" value="goodsBarCode"></el-option>
          <el-option label="外部编码" value="externalCode"></el-option>
        </el-select>
        <el-input @keyup.enter.native="doSearch" v-model.trim="textValue" placeholder="请输入关键词" class="width-200"></el-input>
      </div>
      <el-button-group class="mar-l-20">
        <el-button type="primary" @click="doSearch">查询</el-button>
        <el-button @click="doResetSearch">重置</el-button>
      </el-button-group>
    </div>

    <!-- 内容列表 -->
    <div class="table-container scroll-layer-box">
      <el-table :data="dataList" v-loading="listLoading" element-loading-text="加载中">
        <el-table-column min-width="300px" label="商品名称" prop="title">
          <template slot-scope="scope">
            <div class="flex v-align-c">
              <label><img :src="scope.row.imageUrl" class="t-goods-pic"></label>
              <div class="pad-l-10">
                <div class="line-2 mar-b-5">{{scope.row.title}}</div>
                <div>货号：{{scope.row.goodsCode}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="200px" label="商品规格" prop="skuDetail"></el-table-column>
        <el-table-column width="140px" label="外部编码" prop="externalCode"></el-table-column>
        <el-table-column width="80px" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="doSelect(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange"
        :current-page="searchListQuery.currentPage"
        :page-sizes="[10, 20, 50, 100]" 
        :page-size="searchListQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import { pageWarehouseGoodsStock } from '@/api/warehouse/warehouseGoodsStock'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 是否多规格 0: 单规格 1: 多规格
      skuFlag: {
        type: Number
      },
      // 商品id
      goodsId: {
        type: String
      },
      // 仓库来源 1：总部仓 2：供应商仓
      warehouseSource: {
        type: Number,
        default: 1
      },
      // 订单来源 10：总部订单 20：供应商订单 30:淘宝联盟订单
      apartOrderSource: {
        type: Number
      },
      // 供应商id
      supplierId: {
        type: String
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.initList()
        }
      }
    },
    data() {
      return {
        // 文本model
        textCol: 'goodsTitle',
        textValue: '',
        // 查询表单
        searchListQuery: {},
        // 默认查询表单
        defaultQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: ''
        },
        dataList: [],
        total: 0,
        listLoading: true
      }
    },
    // 初始化页面
    created() {
      this.searchListQuery = { ...this.defaultQuery }
      this.initList()
    },
    methods: {
      initList() {
        this.listLoading = true
        const size = this.searchListQuery.size
        const currentPage = this.searchListQuery.currentPage
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.size = size
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery[this.textCol] = this.textValue
        this.searchListQuery.goodsStatus = 1
        if (this.apartOrderSource) {
          switch (this.apartOrderSource) {
            case 10:
              this.searchListQuery.warehouseSource = 1
              break
            case 20:
              this.searchListQuery.warehouseSource = 2
              break
            default:
          }
        } else {
          this.searchListQuery.warehouseSource = this.warehouseSource
        }
        this.searchListQuery.skuFlag = this.skuFlag
        this.searchListQuery.goodsId = this.goodsId
        this.searchListQuery.supplierId = this.supplierId
        pageWarehouseGoodsStock(this.searchListQuery).then(response => {
          this.listLoading = false
          this.total = response.data.total
          this.dataList = response.data.records
        })
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.textCol = originData.textCol
        this.textValue = originData.textValue
        this.defaultQuery = originData.defaultQuery
        this.doSearch()
      },
      // 选择事件
      doSelect(row) {
        this.$emit('callback', row)
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
